<template>
  <div>
      <el-row :gutter="20">
        <el-col :span="6">
          <span style="width:28%;text-align:right;float:left;line-height:36px;">ID：</span>
          <el-input v-model="id" placeholder="请输入ID" style="width: 55%"></el-input>
        </el-col>
        <el-col :span="6">
          <span style="width:28%;text-align:right;float:left;line-height:36px;">存管ID:</span>
          <el-input v-model="bankData.UsrCustId" placeholder="请输入存管ID" style="width: 55%"></el-input>
        </el-col>
        <el-col :span="6">
          <span style="width:28%;text-align:right;float:left;line-height:36px;">时间:</span>
          <el-date-picker
            v-model="bankData.date"
            type="daterange"
            placeholder="选择日期范围" style="width: 55%">
          </el-date-picker>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="getBankDetail" style="width:25%;">搜索</el-button>
          <el-button type="primary" @click="export_" style="width:25%;">导出</el-button>
        </el-col>
      </el-row>
      <el-table :data="bankData.tableData" border align="center" style="margin-top: 20px;">
        <el-table-column property="TransAmt" label="操作金额" width="150" align="center"></el-table-column>
        <el-table-column property="Remark" label="操作说明" width="200" align="center"></el-table-column>
        <el-table-column property="AcctBal" label="当前余额" align="center"></el-table-column>
        <el-table-column property="ChannelId" label="交易订单号" align="center">
          <template slot-scope="scope">
            <span @click="bankData_detail(scope.$index)" :class="$style.click">查看</span>
          </template>
        </el-table-column>
        <el-table-column label="操作时间" align="center">
          <template slot-scope="scope">
              {{`${scope.row.TransDateTime.slice(0,4)}-${scope.row.TransDateTime.slice(4,6)}-${scope.row.TransDateTime.slice(6,8)} ${scope.row.TransDateTime.slice(8,10)}:${scope.row.TransDateTime.slice(10,12)}:${scope.row.TransDateTime.slice(12,14)}`}}
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="详情" :visible.sync="bankData.dialog1" size="tiny">
        <div>
          存管银行流水号：{{bankData.DepoBankSeq}}
        </div>
        <div>
          OrdId: {{bankData.OrdId}}
        </div>
      </el-dialog>
  </div>
</template>
<script>
import { dateFormat } from 'vux'
export default {
  data() {
    return {
      id: this.$route.params.id,
      bankData: {
        dialog1: false,
        UsrCustId: '',
        date: [
          dateFormat(new Date(), 'YYYY-MM'),
          new Date()
        ],
        tableData: [],
        DepoBankSeq: '',
        OrdId: ''
      },
    }
  },
  methods: {
    // 银行流水详情弹窗
    bankData_detail (index) {
      this.bankData.DepoBankSeq = this.bankData.tableData[index].DepoBankSeq;
      this.getOrdId();
      this.bankData.dialog1 =true;
    },
    // 获得银行流水
    getBankDetail () {
        this.$get(this,{api:'bank/detail.do',data: {
            id: this.id,
            UsrCustId: this.bankData.UsrCustId,
            BeginDate: this.bankData.date && dateFormat(this.bankData.date[0], 'YYYYMMDD'),
            EndDate: this.bankData.date && dateFormat(this.bankData.date[1], 'YYYYMMDD'),
          }
        }).then(({data})=>{
          if (data.state === 0) {
            var obj = JSON.parse(data.content)
            if (obj.RespCode === '000') {
              this.bankData.tableData = obj.Details;
            } else {
              this.$toast({
                message: obj.RespDesc
              })
            }
          } else {
            this.$toast({
              message: data.message
            })
          }
        })
    },
    getBanKNum () {
      this.$get(this,{api:'manage/findBankIdById.do',data: {
          fuid: this.id,
        }
      }).then(({data})=>{
        if (data.state === 0) {
          this.bankData.UsrCustId = data.content;
          this.getBankDetail();
        } else {
          this.$toast({
            message: data.message
          })
        }
      })
    },
    getOrdId () {
        this.$get(this,{api:'bank/findOrdId.do',data: {
            DepoBankSeq: this.bankData.DepoBankSeq,
          }
        }).then(({data})=>{
          if (data.state === 0) {
            this.bankData.OrdId = data.content;
          } else {
            this.$toast({
              message: data.message
            })
          }
        })
    },
    //导出文件
    export_ () {
      window.open(`${window.path}/bank/excel.do?id=${this.bankData.id}&UsrCustId=${this.bankData.UsrCustId}&BeginDate=${dateFormat(this.bankData.date[0], 'YYYYMMDD')}&EndDate=${dateFormat(this.bankData.date[1], 'YYYYMMDD')}`)
    }
  },
  mounted() {
    this.getBanKNum();
  }
}
</script>

<style lang="scss" module>
.header {
  font-size: 14px;
  padding-bottom: 20px;
}
</style>


